
<!-- 元素包括：开始标签，属性，内容，结束标签 -->
<p>我的猫咪脾气暴躁:)</p>

<!-- 斜体强调，倾斜效果 -->
<em>刀枪剑戟 斧钺钩叉</em>

<!-- 嵌套着重强调元素，加粗效果 -->
<p>我的猫咪脾气<strong>暴躁</strong>)</p>

<!-- <p>是一个块级元素，<em> 是一个内联元素 -->
<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p><p>第五</p><p>第六</p>

<!-- 空内容元素 -->
<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">

<p class="editor-note">我的猫咪脾气暴躁:)</p>

<!-- 锚元素，使被标签包裹的内容成为一个超链接 -->
<a href="https://www.mozilla.org/" title="The Mozilla homepage">Mozilla</a>
<a href="https://roy-tian.github.io/learning-area/extras/tools/playable-code/">代码操场</a>

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text">

<!-- 单引号或者双引号都可以，建议双引号 -->

<h1>经典回忆</h1>
<p>
 相思无用，惟别而已。别期若有定，千般煎熬又何如？莫道黯然销魂，何处<strong>柳暗花明</strong>？<br>
 ——《<a href="https://zh.wikipedia.org/zh-hans/神鵰俠侶">神雕侠侣</a>》
</p>
<img src="https://roy-tian.github.io/learning-area/extras/tools/playable-code/images/sdxl.jfif">

<!--  <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分，为了解决显示问题，需要urlencode -->

<p>HTML 中用 <p> 来定义段落元素。</p>

<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

<!-- <link>元素引用CSS -->
<!-- <script> 元素引用JavaScript -->

<p>我是一个段落，千真万确。</p>

<h1>我是文章的标题</h1>
<h2>我是文章的标题</h2>
<h3>我是文章的标题</h3>
<h4>我是文章的标题</h4>
<h5>我是文章的标题</h5>
<h6>我是文章的标题</h6>

<h1>三国演义</h1>

<p>罗贯中</p>

<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>

<p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>

<p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p>

<h3>却说张飞</h3>

<p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……</p>

<p></p>

<h1>静夜思</h1>
<p>床前明月光 疑是地上霜</p>
<p>举头望明月 低头思故乡</p>

<!-- 无序列表 -->
<ul>
    <li>豆浆</li>
    <li>油条</li>
    <li>豆汁</li>
    <li>焦圈</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>沿着条路走到头</li>
    <li>右转</li>
    <li>直行穿过第一个十字路口</li>
    <li>在第三个十字路口处左转</li>
    <li>继续走 300 米，学校就在你的右手边</li>
</ol>

<!-- 超链接 -->
<p><a href="https://www.mozilla.org">Mozilla Official Site</a></p>

<p><a href="http://www.example.com/large-report.pdf">下载销售报告（PDF，10MB）</a></p>

<p><a href="http://www.example.com/video-stream">观看视频（将在新标签页中播放，HD画质）</a></p>

<p><a href="http://www.example.com/car-game">进去汽车游戏（需要Flash插件）</a></p>

<p><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN" download="firefox-latest-64bit-installer.exe">下载最新的Firefox中文版 - Windows（64位）</a></p>

<p><a href="mailto:example@mozilla.org">向example发送邮件</a></p>

<p><a href="mailto:example@mozilla.org?cc=name2@mozilla.org&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">Send mail with cc, bcc, subject and body</a></p>


<!-- 描述列表 -->
<dl>
    <dt>内心独白</dt>
      <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
    <dt>语言独白</dt>
      <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
    <dt>旁白</dt>
      <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>
  
<!-- 块引用 -->
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
    <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
    Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<!-- 行内引用 -->
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
    for short quotations that don't require paragraph breaks.</q></p>

<!-- 主动学习： -->
<p>你好！欢迎访问我的激励网页！<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a> 曰：</p>
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子">
    <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p>
</blockquote>
<p>要保持乐观，<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话。</q>（源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。）</p>

<!-- 缩略语 -->
<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>
<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

<!-- 主动学习：标记一个缩略语 -->
<p><abbr title="美国国家航空航天局（National Aeronautics and Space Administration）">NASA</abbr>做了一些动人心弦的故事</p>

<!-- 标记联系方式 -->
<address>
    <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

<!-- 上标和下标 -->
<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

<!-- 展示计算机代码 -->
<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}</code></pre>

<p>请不要使用 <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 等表象元素。</p>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>


<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

<!-- 标记时间和日期 -->
<time datetime="2016-01-20">2016年1月20日</time>

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 调用特定的周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

<!--  -->
<br>
<img src="./structuring-a-page-of-content/assets/favorite-1.jpg" alt="一只鸟儿"><br>
<img src="./structuring-a-page-of-content/assets/favorite.jpg" alt="一只鸟儿"><br>
<img src="./structuring-a-page-of-content/assets/favorite-1.jpg" alt="一只鸟儿" width="300" height="260" title="标题"><br>
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
  width="200"
  height="171"
  title="曼彻斯特大学博物馆展出的一只霸王龙的化石"><br>

<div class="figure">
  <img src="/images/dinosaur_small.jpg" alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。" width="400" height="341">
  <p>曼彻斯特大学博物馆展出的一只霸王龙的化石</p>
</div>

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

<video src="./" controls>
  你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

<video controls>
  <source src="./" type="video/mp4">
  <source src="./" type="video/webm">
  <p>你的浏览器不支持HTML5视频。可点击<a href="./">此链接</a>观看</p>
</video>

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="./" type="video/mp4">
  <source src="./" type="video/webm">
  <p>你的浏览器不支持HTML5视频。可点击<a href="./">此链接</a>观看</p>
</video>

<iframe src="https://player.bilibili.com/player.html?aid=19390801&cid=31621681&page=1" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true">
  <p>改革春风吹满地</p>
</iframe>

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

<object></object>

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
</object>

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg><br>

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

<iframe src="triangle.svg" width="500" height="500" sandbox>
  <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
